<div th:replace="~{sidebar :: layout('首页', _, ~{::.main}, ~{::#js})}" xmlns:th="http://www.thymeleaf.org">
    <!-- 主内容区域 -->
    <div class="main-content main" id="mainContent">
        <div class="header">
            <h1 id="contentTitle">报表管理</h1>
            <div class="sale-actions">
                <a class="btn btn-primary" id="addCustomerBtn" th:href="@{/sale/addOrEdit}">
                    <i class="icon-customers"></i> 添加报表
                </a>
                <button class="toggle-sidebar" id="toggleSidebar">☰</button>
            </div>
        </div>

        <!-- 报表统计卡片 -->
        <div class="customer-stats">
            <div class="stat-card">
                <div class="stat-value" th:text="${sales.getTotalElements()}">248</div>
                <div class="stat-label">总报表数</div>
            </div>
        </div>

        <!-- 报表表格 -->
        <div class="customer-table-container">
            <div class="table-header">
                <div class="search-box">
                    <i class="icon-dashboard"></i>
                    <input type="text" id="searchInput" th:value="${searchName}" placeholder="搜索报表...">
                    <a th:if="${!#strings.isEmpty(searchName)}" th:href="${'/sale'}"
                       title="清除搜索条件">
                    </a>
                </div>
            </div>

            <table id="customerTable">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>客户名称</th>
                    <th>客户电话</th>
                    <th>施工地址</th>
                    <th>总金额</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody th:each="sale : ${sales.getContent()}">
                <!-- 报表数据将通过JavaScript动态加载 -->
                <td th:text="${sale.getId()}">编号</td>
                <td th:text="${sale.getUser().getName()}">客户名称</td>
                <td th:text="${sale.getUser().getMobile()}">客户电话</td>
                <td th:text="${sale.getUser().getAddress()}">施工地址</td>
                <td th:text="${sale.getPrice()}">总金额</td>
                <td>
                    <a class="action-btn edit-btn" th:href="@{'/sale/detail/' + ${sale.getId()}}">查看报表</a>
                    <a class="action-btn edit-btn" th:href="@{'/sale/edit/' + ${sale.getId()}}">编辑</a>
                    <a class="action-btn"
                       th:href="@{'/sale/delete/' + ${sale.getId()}}"
                       onclick="return confirm('确认删除?')">
                        删除
                    </a>
                </td>
                </tbody>
            </table>

            <div class="pagination" th:if="${sales.getTotalElements() > 0}">
                <a class="btn btn-secondary" id="prevPage" th:if="${sales.hasPrevious()}"
                   th:href="@{/sale(current=${sales.getNumber() > 0 ? sales.getNumber() - 1 : 0},
                  page=10,
                  name=${searchName})}"
                   th:unless="${sales.first}">上一页</a>
                <span class="page-info">当前第 [[${sales.getNumber() + 1} ]] / [[${sales.getTotalPages()}]] 页， 共计 [[${sales.getTotalElements()}]] 条记录</span>
                <a class="btn btn-secondary" id="nextPage" th:if="${sales.hasNext()}"
                   th:href="@{/sale(current=${sales.getNumber() + 1},
                  page=10,
                  name=${searchName})}"
                   th:unless="${sales.last}">下一页</a>
            </div>
        </div>
    </div>

    <script th:src="@{/js/classify/sale.js}" id="js"></script>
</div>